<template>
	<view>
		<section>
			<view v-for="(item,li) in usercomment" :key="li" class="usercomment-box">
				<view class="usercomment-box-image">
					<image :src="item.commentimage" mode="" class="usercomment-image"></image>
				</view>
				<view class="usercomment-titles">
					<view class="usercomment-message">
						<view class="usercomment-name">
							{{item.usernamecomment}}
						</view>
						<view class="usercomment-title-date">
							<text class="comment-nate">{{item.commentnate}}</text>
							<text class="comment-date">{{item.commentdate}}</text>
						</view>
						<view class="eit-user">
						{{item.eituser}}
						</view>
					</view>
					<view class="praise">
						<text class="praise-thank">
							<image :src="item.praiseimage" mode="" class="praise-image"></image>
						    {{item.praise}}
					    </text>
						<text class="reply-thank">
							<image :src="item.replyimage" mode="" class="reply-image"></image>
							{{item.reply}}
						</text>
					</view>
				</view>
				<view class="note-content">
					<image :src="item.nateimage" mode="" class="note-content-image"></image>
				</view>
			</view>
		</section>
		<footer>
			<view class="the-end">
				{{ending}}
			</view>
		</footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				usercomment: [{
					/* commentimage:require(""), */
					usernamecomment:"魂天",
					commentnate:"赞了你的笔记",
					commentdate:"05-22",
					/* praiseimage:require(""), */
					praise:"赞",
					/* replyimage:require(""), */
					reply:"回复",
					eituser:"@希习溪哈哈",
					/* nateimage:require("") */
				}],
				ending:"- THE END -"
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.usercomment-box {
		width: 100%;
		height: 300rpx;
		/* background-color: aquamarine; */
		display: flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	.usercomment-box-image{
		width: 20%;
		height: 300rpx;
		/* background-color: darkmagenta; */
    }
	.usercomment-box-image>.usercomment-image{
		width: 90rpx;
		height: 90rpx;
		object-fit: cover;
		/* object-position: center; */
		border-radius: 50%;
		display: block;
		margin: auto;
		margin-top: 40rpx;
	}
	.usercomment-box>.usercomment-titles{
		width: 60%;
		height: 300rpx;
		/* background-color: aqua; */
	}
	.usercomment-box>.usercomment-titles>.usercomment-message{
		width: 100%;
		height: 140rpx;
		/* background-color: bisque; */
		margin-top: 40rpx;
	}
	.usercomment-box>.usercomment-titles>.usercomment-message>.usercomment-name{
		width: 100%;
		height: 50rpx;
		/* background-color: darkgreen; */
		font-size: 33rpx;
	}
	.usercomment-box>.usercomment-titles>.usercomment-message>.eit-user{
		line-height: 60rpx;
	}
	.usercomment-box>.usercomment-titles>.usercomment-message>.usercomment-title-date{
		width: 100%;
		height: 42rpx;
		/* background-color: darkgoldenrod; */
	}
	.usercomment-box>.usercomment-titles>.usercomment-message>.usercomment-title-date>.comment-date{
		font-size: 24rpx;
		line-height: 42rpx;
		margin-left: 20rpx;
		/* background-color: fuchsia; */
	}
	.usercomment-box>.usercomment-titles>.praise{
		width: 100%;
		height: 120rpx;
/* 	   background-color: antiquewhite;	 */
	    display: flex;
		align-items: center;
	}
	
	.usercomment-box>.usercomment-titles>.praise>.praise-thank{
		display: inline-block;
		width: 120rpx;
		height: 70rpx;
		background-color: rgb(235, 235, 246);
		border-radius: 30rpx;
		font-size: 32rpx;
		text-align: center;
	    line-height: 70rpx;
		 margin-right: 20rpx;

	}
      .praise-image{	
		 display: inline-block;
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
		
     }
		.usercomment-box>.usercomment-titles>.praise>.reply-thank{
			display: inline-block;
			width: 140rpx;
			height: 70rpx;
			background-color: rgb(235, 235, 246);
			border-radius: 30rpx;
			font-size: 32rpx;
			text-align: center;
		     line-height: 70rpx;
			 margin-right: 20rpx;
		}
		.reply-image{
			display: inline-block;
			width: 35rpx;
			height: 35rpx;
			margin-right: 10rpx;
		}
	.usercomment-box>.note-content{
		width: 20%;
		height: 300rpx;
		/* background-color: brown; */
	}
	.usercomment-box>.note-content>.note-content-image{
		width: 100rpx;
		height: 100rpx;
		margin-top: 40rpx;
		object-fit: cover;
		object-position: center; 
	}
	.the-end{
		width: 100%;
		height: 100rpx;
		/* background-color: aqua; */
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.3);
	}
</style>